<template>
  <div>
    <div class="fu">
      <button class="btn">
        <router-link to="/AdmSystem/AddAdmin" tag="div">新增管理员</router-link>
      </button>
    </div>
    <div class="bians">
      <el-input placeholder="请输入查询内容" v-model="search.searchValue" class="input-with-select">
        <el-select v-model="search.searchType" slot="prepend" placeholder="请选择" style="width:120px">
          <el-option label="管理员名字" value="username"></el-option>
          <el-option label="管理员权限" value="part"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="serchGoods"></el-button>
      </el-input>
    </div>
    <el-table :data="admData" border style="width: 100%">
      <el-table-column fixed prop="_id" label="管理员编号" width="300%"></el-table-column>
      <el-table-column fixed prop="username" label="姓名"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="part" label="权限"></el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="updateAdm(scope.row)" class="updateBtn">修改</el-button>
          <el-dialog title="修改信息" :visible.sync="centerDialogVisible" :modal-append-to-body="false" >
            <el-form :model="admData2">
              <el-form-item label="管理员名字：">
                <el-input autocomplete="off" v-model="admData2.username"></el-input>
              </el-form-item>
              <el-form-item label="管理员密码：">
                <el-input autocomplete="off" v-model="admData2.password"></el-input>
              </el-form-item>
              <el-form-item label="管理员权限：">
                <el-input autocomplete="off" v-model="admData2.part"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="updata(admData2)" :plain="true">确 定</el-button>
            </div>
          </el-dialog>

          <el-button type="danger" size="mini" @click="removeAmd(scope.row)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("admstores");
export default {
  data() {
    return {
      search: {
        searchType: "",
        searchValue: ""
      },
      centerDialogVisible: false,
      admData2: {
        username: "",
        password: "",
        part: ""
      },
      shopsData: {}
    };
  },
  created() {
    this.getadmAsync();
  },
  computed: {
    ...mapState(["admData"])
  },
  methods: {
    ...mapActions(["getadmAsync", "deleteAdm", "updataAdm"]),
    removeAmd(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteAdm(row);
          this.getadmAsync();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    updateAdm(row) {
      this.centerDialogVisible = true;
      this.admData2 = { ...row };
      // console.log(row)
    },
    updata(newGoodData) {
      console.info(newGoodData);
      this.updataAdm({ ...newGoodData });
      this.$message({
        showClose: true,
        message: "修改成功",
        type: "success"
      });
      this.centerDialogVisible = false;
    },
    serchGoods() {
      console.log(this.search);
      //  this.getStudentsAsync()
      this.getadmAsync(this.search);
    }
  }
};
</script>

<style scoped>
.el-breadcrumb {
  padding-left: 10px;
  height: 30px;
}

.el-table__header-wrapper .has-gutter tr th {
  line-height: 60px;
}
.has-gutter .cell {
  text-align: center;
  font-size: 14px;
}
.el-table__row .cell {
  text-align: center;
}
.is-right button {
  margin-right: 5px;
}
.el-dialog {
  width: 440px;
}
.el-form-item {
  padding: 0 40px;
}
.el-dialog__header {
  display: flex;
}
.el-dialog .el-input {
  width: 260px;
}
.el-dialog__close {
  display: none;
}
.dialog-footer {
  padding-right: 40px;
}

.el-pagination {
  margin-top: 10px;
  height: 30px !important;
}
.studentsImage {
  width: 50px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.bans {
  line-height: 60px;
}
.el-table_1_column_6 .cell img {
  width: 50px !important;
  height: 50px !important;
}
.btn {
  width: 150px;
  height: 35px;
  background-color: white;
  color: black;
  border-radius: 10px;
}
.fu {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 10px;
}
.el-table{
  line-height: 30px;
}
.bians{
  margin-bottom: 10px;
}
.updateBtn{
  margin-right: 5px;
}
</style>